<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>职位列表</title>
	<link rel="stylesheet" href="../css/work_list.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="shortcut icon" href="../img/title/招聘求职.png" type="image/x-icon">
</head>
<body>
	
	<div id="app">
		<div class="header">
			<div class="header_left">
				<img src="../img/main/招聘会.png"	>
				<a href="./main.html">&nbsp;校园兼职管理</a>
			</div>
			<div class="header_center">
				<ul>
					<li ><a href="./main.html">主页</a></li>
					<li><a  style="color: lawngreen;" href="">职位</a></li>
					<li><a href="./news.html">校园新闻</a></li>
				</ul>
			</div>
			<div class="header_right">
				<el-button @click="loginBtn" type="success" icon="el-icon-user-solid">登录</el-button>
				<el-button @click="registerBtn" type="success" icon="el-icon-takeaway-box">注册</el-button>
			</div>
		</div>
		<div class="section">
			<div class="section_1">职位列表</div>
			<div class="section_2">首页 > 职位列表</div>
		</div>
		<div class="content">
			<div class="content_header">
				<el-input class="content_header_input" v-model="job_like.job_name" placeholder="搜索职位名称"></el-input>
				<el-select class="content_header_select" v-model="job_like.job_address" clearable placeholder="请选择城市">
					<el-option v-for="item in cities" :key="item" :label="item" :value="item" />
				</el-select>
								
				<el-select class="content_header_select" v-model="job_like.job_type" clearable placeholder="类型">
					<el-option
					v-for="item in type"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
				
				<el-button @click="search" class="content_header_search" type="success">搜索</el-button>
			</div>
			<div class="content_center">
				<div class="content_center_font">
					<div>{{this.pagination.total}}个职位或空缺</div>
				</div>
				<div class="content_center_list">
					<div class="content_center_list_item" v-for="item in dataList" v-if="item.job_status == '招聘中'">
						<div class="content_center_list_item_label">
							<el-tag style="position: relative;left: 8px;top: 8px;" type="success">{{item.job_type}}</el-tag>
						</div>
						<div class="content_center_list_item_content">
							<el-avatar :size="80" :src="item.job_image"></el-avatar>
							<div style="font-weight:  bold;">{{item.job_name}}</div>
							<div style="font-size: 14px;color: #aaa;">{{item.job_address}}</div>
							<el-button :id="item.id" @click="getAllMsg" type="success" plain>立即查看</el-button>
						</div>
					</div>
				</div>
			</div>
			<div class="content_footer">
				<el-pagination
				@current-change="handleCurrentChange"
				:current-page="pagination.currentPage"
				:page-size="pagination.pageSize"
				layout="total, prev, pager, next"
				:total="pagination.total">
				</el-pagination>
			</div>
		</div>
	</div>
</body>

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/jquery-3.6.1.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/after_landing.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
	data(){
		return {
			type: [{
					value: '全职',
					label: '全职'
					}, {
					value: '兼职',
					label: '兼职'
					}],
			job_like: {
				job_name: '',
				job_address: [],
				job_type: [],
			},
			cities: [],
			circleUrl: '../img/defaultImage/111.jpg',
			dataList: [],
			pagination: {//分页相关模型数据
				currentPage: 1,//当前页码
				pageSize:4,//每页显示的记录数
				total:0,//总记录数
			},
			id: 0,
			userMsgList : [],
		}
	},
	  created(){
		  let username = getCookie("cookie_username")
		  if (username !== null && username.length > 0){
			  axios.get('/users/'+username).then((resp)=>{
				  this.userMsgList = resp.data.data
				  $('.header_center ul').append(`<li><a href="./personal_resume.html">简历</a></li>`)
				  $('.header_center ul').append(`<li><a href="./personal_center.html">个人中心</a></li>`)
				  $('.header_right').empty()
				  let url = this.userMsgList.user_image
				  $(".header_right").append(`<img style="width: 7%;margin-right: 5px" src="${url}">${username}`);
				  $(".header_right").append(`<a style="text-decoration: none;color: #77838e;margin-left: 5px" href="/logins/logout">注销</a>`);
			  })
		  } else {
			  $('.header_center ul li:gt(2)').remove()
		  }
	  },
	mounted(){
		this.getAll();
	},
	methods: {
		getAll(){
			axios.get('/jobs/'+this.pagination.currentPage+"/"+this.pagination.pageSize).then((resp)=>{
				this.dataList = resp.data.data.records;
				this.pagination.pageSize = resp.data.data.size;
				this.pagination.currentPage = resp.data.data.current;
				this.pagination.total = resp.data.data.total;
			})
			axios.get("/jobs/getCities").then(resp => {
				const { data } = resp.data
				this.cities = data
			})
		},
		loginBtn(){
			window.location.replace("/pages/login.html");
		},
		registerBtn(){
			document.location.href = "register.html"
		},
		getAllMsg(e){
			//得到点击元素的自定义属性 id
			this.id = parseInt(e.currentTarget.getAttribute("id"));
			console.log(this.id)
			window.location.replace("/pages/work_detail.html");
			window.sessionStorage.setItem('id', this.id);
		},
		handleCurrentChange(val) {
			//修改页码值为当前选中的页码值
			this.pagination.currentPage = val;
			//执行查询
			this.search();
		},
		search(){
			params = '?job_name='+this.job_like.job_name
			params += '&job_address='+this.job_like.job_address
			params += '&job_type='+this.job_like.job_type

			axios.get('/jobs/like/'+this.pagination.currentPage+"/"+this.pagination.pageSize+params).then((resp)=>{
				this.dataList = resp.data.data.records;
				this.pagination.pageSize = resp.data.data.size;
				this.pagination.currentPage = resp.data.data.current;
				this.pagination.total = resp.data.data.total;
			})
		}
	}
  })
</script>
<script>

</script>
</html>